<template>
	<div>
		<div class="content-nav-list">
			<div :class="{'content-nav-list-item': true, 'active': index == navIndex}" v-for="(item, index) in navList" @tap="navIndex = index">
				{{item}}
			</div>
		</div>
		<div class="mui-content mui-scroll-wrapper" id="pullrefresh2">
			<div class="mui-scroll">
				
				<div class="topic-list" v-if="navIndex == 0">
					<div class="topic-list-item" @tap="go('conversationDetail', item.topic_id)" v-for="(item, index) in data">
						<img :src="item.img_path" width="100%" height="200" />
						<div class="num">
							<img src="../../static/img/icon/find_icon/xinxi.png" width="20" height="20" />
							<div>{{item.childCount}}</div>
						</div>
					</div>
				</div>
				<div class="content-list" v-if="navIndex == 1">
					<div class="content-list-follow">
						<div class="content-list-follow-header">
							<div>达人推荐</div>
							<div @tap="go('followMore')">
								<div>查看更多</div>
								<img src="../../static/img/icon/my_icon/back@3x.png" />
							</div>
						</div>
						<div class="content-list-follow-list">
							<div class="item" @tap="go('followDetail')" v-for="(item,index) in userList" v-if="index < 4">
								<div>
									<img v-lazy="item.headPortrait"  class="itemImg"/>
								</div>
								<div>{{item.userName}}</div>
								<div class="btn" v-if="item.isFollow == null" @tap.stop="follow(1,item)">
									<img src="../../static/img/icon/find_icon/follow@3x.png" />
									<div>关注</div>
								</div>
								<div class="btn active" @tap.stop="cancel(item)" v-else>
									<div>已关注</div>
								</div>
							</div>
						</div>
					</div>
					<div class="content-list-item" v-for="(item, index) in data1">
						<div class="content-list-item-title">
							<div>
								<img v-lazy="item.headPortrait" />
								<div class="item-user">
									<div class="item-user-title">
										{{item.user_name}}
									</div>
									<div class="item-user-date">
										{{item.h}}:{{item.m}}&nbsp;&nbsp;来自于<span style="color: #DD524D;">{{item.typeName}}</span>
									</div>
								</div>
							</div>
							<div>
								<div class="btn" v-if="item.n_isFollow == 0" @tap="follow(1, item)">关注</div>
								<div class="btn active" v-else @tap="cancel(item)">已关注</div>
							</div>
						</div>
						<div class="content-list-item-content" @tap="go('forumDetail', item.note_id)" v-if="item.hanType != 2">
							<div class="item-content-title">{{item.note_name}}</div>
							<div class="item-content">
								{{item.note_content}}
							</div>
							<div class="item-content-imgs">
								<img v-lazy="item" v-for="(item, index) in item.img_path.split(',')" v-if="item != ''"/>
							</div>
							<div class="item-content-bottom">
								浏览{{item.look_count || 0}}次
							</div>
						</div>
						<div class="content-list-item-content" @tap="go('newestDetail', item.note_id)" v-else>
							<div class="item-content-title">{{item.note_name}}</div>
							<div class="item-content">
								{{item.note_content}}
							</div>
							<div class="item-content-imgs">
								<img v-lazy="item" v-for="(item, index) in item.img_path.split(',')" v-if="item != ''"/>
							</div>
							<div class="item-content-bottom">
								浏览{{item.look_count || 0}}次
							</div>
						</div>
						<div class="item-bottom">
							<div class="item-bottom-item">
								<div>
									<img src="../../static/img/icon/find_icon/pinglun_luntan@2x.png" />
									<div class="margin-left">{{item.n_commentCount || '评论'}}</div>
								</div>
							</div>
							<div class="item-bottom-item">
								<div @tap="collect(item)">
									<img src="../../static/img/icon/find_icon/collection@2x.png" v-if="item.n_isCollect == 0"/>
									<img src="../../static/img/icon/find_icon/collection_faxian@3x.png" v-else/>
									<div class="margin-left">{{item.n_collectCount || '收藏'}}</div>
								</div>
							</div>
							<div class="item-bottom-item">
								<div @tap="good(item)">
									<img src="../../static/img/icon/find_icon/heart_luntan@2x.png" v-if="item.n_isLike == 0"/>
									<img src="../../static/img/icon/find_icon/heart_xuanzhong_luntan@3x.png" v-else/>
									<div class="margin-left">{{item.likeCount || '赞'}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="content-list" v-if="navIndex == 2">
					<div class="content-list-item" v-for="(item, index) in data2">
						<div class="content-list-item-title">
							<div>
								<img v-lazy="item.headPortrait" />
								<div class="item-user">
									<div class="item-user-title">
										{{item.user_name}}
									</div>
									<div class="item-user-date">
										{{item.h}}:{{item.m}}&nbsp;&nbsp;来自于<span style="color: #DD524D;">{{item.typeName}}</span>
									</div>
								</div>
							</div>
							<div>
								<div class="btn" v-if="item.n_isFollow == 0" @tap="follow(1, item)">关注</div>
								<div class="btn active" v-else @tap="cancel(item)">已关注</div>
							</div>
						</div>
						<div class="content-list-item-content" @tap="go('newestDetail', item.note_id)">
							<div class="item-content-title">{{item.note_name}}</div>
							<div class="item-content">
								{{item.note_content}}
							</div>
							<div class="item-content-imgs">
								<img v-lazy="item" v-for="(item, index) in item.img_path.split(',')" v-if="item != ''"/>
							</div>
							<div class="item-content-bottom">
								浏览{{item.look_count || 0}}次
							</div>
						</div>
						<div class="item-bottom">
							<div class="item-bottom-item">
								<div>
									<img src="../../static/img/icon/find_icon/pinglun_luntan@2x.png" />
									<div class="margin-left">{{item.n_commentCount || '评论'}}</div>
								</div>
							</div>
							<div class="item-bottom-item">
								<div @tap="collect(item)">
									<img src="../../static/img/icon/find_icon/collection@2x.png" v-if="item.n_isCollect == 0"/>
									<img src="../../static/img/icon/find_icon/collection_faxian@3x.png" v-else/>
									<div class="margin-left">{{item.n_collectCount || '收藏'}}</div>
								</div>
							</div>
							<div class="item-bottom-item">
								<div @tap="good(item)">
									<img src="../../static/img/icon/find_icon/heart_luntan@2x.png" v-if="item.n_isLike == 0"/>
									<img src="../../static/img/icon/find_icon/heart_xuanzhong_luntan@3x.png" v-else/>
									<div class="margin-left">{{item.likeCount || '赞'}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<v-share :dialog="show" @hide="show = false"></v-share>
	</div>
</template>

<script>
	import { getData } from '../service/getData'
	import VShare from '../base/v-share'
	export default {
		data() {
			return {
				data: [],
				data1: [],
				data2: [],
				navIndex: 1,
				navList: ['话题', '最新', '热门'],
				page: 1,
				lastPage: 1,
				show: false,
				userList: [],
			}
		},
		components: {
			VShare
		},
		methods: {
			init() {  //默认加载
				this.$store.state.isLoading = true
				getData('/expertrecommend/getExpertRecommendApi', {
					pn: 1
				}).then(d => {
					if(d.code == 1) {
						this.userList = d.pageInfo.list
					}
				})
				
				getData('/hotandnewest/getHotAndNewestListApi', {
					pn: 1,
					orderType: 2
				}).then(d => {
					this.$store.state.isLoading = false
					if(d.code == 1) {
						d.pageInfo.list.map(x => {
							if(x.hanType == 1) {
								x.n_isLike = x.ct_islike
								x.n_isFollow = x.ct_isfollow
								x.n_isCollect = x.ct_iscollect
								x.n_commentCount = x.ct_commentCount
								x.n_collectCount = x.ct_collectCount
								x.user_id = x.userId
								x.img_path = x.topicPicture
								x.typeName = '参与话题'
							} else if (x.hanType == 2) {
								x.typeName = '分享生活'
							} else if (x.hanType == 3) {
								x.typeName = '长帖子'
							}
							let date = new Date(x.time)
							x.h = date.getHours()
							x.m = date.getMinutes()
							x.s = date.getSeconds()
						})
						this.data1 = d.pageInfo.list
						this.lastPage = d.pageInfo.lastPage
					}
				}).catch(err => {
					this.$store.state.isLoading = false
					console.log(err)
				})
			},
			good(item) {  //点赞
				let type = 0
				if(item.hanType == 1) {
					type = 3
				} else if (item.hanType == 2) {
					type = 6
				} else if (item.hanType == 3) {
					type = 7
				}
				getData('/like/appToLike', {
					token: sessionStorage.token,
					pdId: item.note_id,
					noteType: type
				}).then(d => {
					if(d.code == 100) {
						if(d.object == 1) {
							item.likeCount += 1
							item.n_isLike = 1
							mui.toast("点赞成功")							
						} else {
							item.likeCount -= 1
							item.n_isLike = 0
						}
					}
				})
			},
			collect(item) {  //收藏
				let type = 0
				if(item.hanType == 1) {
					type = 3
				} else if (item.hanType == 2) {
					type = 2
				} else if (item.hanType == 3) {
					type = 6
				}
				
				getData('/collect/appAddCollect', {
					token: sessionStorage.token,
					noteId: item.note_id,
					type: type
				}).then(d => {
					if(d.code == 100) {
						if(d.msg == 1) {
							mui.toast("收藏成功")	
							item.n_isCollect = 1
							item.n_collectCount += 1							
						} else {
							item.n_isCollect = 0
							item.n_collectCount -= 1	
						}
					}
				})
			},
			go(str, id) {  //跳转保存下标
				sessionStorage.index = 1
				this.route(str, id)
			},
			follow(status, item) {  //关注
				getData('/follow/appAddFollow', {
					token: sessionStorage.token,
					userId: item.user_id
				}).then(d => {
					if(d.code == 100) {
						mui.toast(d.msg)
						item.n_isFollow = 1
					}
				})
			},
			cancel(item) {  //取消关注
				getData('/follow/appDeleteFollow', {
					token: sessionStorage.token,
					userId: item.user_id
				}).then(d => {
					if(d.code == 100) {
						item.isFollow = null
					}
				})
			},
			pullupRefresh() {  //上拉加载
				if(this.lastPage != this.page) {
					if(this.navIndex == 1) {
						getData('/hotandnewest/getHotAndNewestListApi', {
							pn: this.page++,
							orderType: 2
						}).then(d => {
							if(d.code == 1) {
								d.pageInfo.list.map(x => {
									if(x.hanType == 1) {
										x.n_isLike = x.ct_islike
										x.n_isFollow = x.ct_isfollow
										x.n_isCollect = x.ct_iscollect
										x.n_commentCount = x.ct_commentCount
										x.n_collectCount = x.ct_collectCount
										x.user_id = x.userId
										x.img_path = x.topicPicture
										x.typeName = '参与话题'
									} else if (x.hanType == 2) {
										x.typeName = '分享生活'
									} else if (x.hanType == 3) {
										x.typeName = '长帖子'
									}
									let date = new Date(x.time)
									x.h = date.getHours()
									x.m = date.getMinutes()
									x.s = date.getSeconds()
								})
								mui('#pullrefresh2').pullRefresh().endPullupToRefresh();
								this.data1 = this.data1.concat(d.pageInfo.list)
							}
						})
					} else if(this.navIndex == 0) {
						getData('/topic/appFindAppTopic', {
							pn: this.page++
						}).then((d) => {
							this.$store.state.isLoading = false
							if(d.code == 100) {
								mui('#pullrefresh2').pullRefresh().endPullupToRefresh();
								this.data = this.data.concat(d.pageInfo.list)
	//							this.lastPage = d.note.lastPage
							}
						})
					} else if(this.navIndex == 2) {
						getData('/hotandnewest/getHotAndNewestListApi', {
							pn: this.page++,
							orderType: 1
						}).then(d => {
							if(d.code == 1) {
								d.pageInfo.list.map(x => {
									if(x.hanType == 1) {
										x.n_isLike = x.ct_islike
										x.n_isFollow = x.ct_isfollow
										x.n_isCollect = x.ct_iscollect
										x.n_commentCount = x.ct_commentCount
										x.n_collectCount = x.ct_collectCount
										x.user_id = x.userId
										x.img_path = x.topicPicture
										x.typeName = '参与话题'
									} else if (x.hanType == 2) {
										x.typeName = '分享生活'
									} else if (x.hanType == 3) {
										x.typeName = '长帖子'
									}
									let date = new Date(x.time)
									x.h = date.getHours()
									x.m = date.getMinutes()
									x.s = date.getSeconds()
								})
								mui('#pullrefresh2').pullRefresh().endPullupToRefresh();
								this.data2 = this.data2.concat(d.pageInfo.list)
							}
						}).catch(err => {
							console.log(err)
						})
					}
				} else {
					mui('#pullrefresh2').pullRefresh().endPullupToRefresh(true);
				}
           	},
           	pulldownRefresh () {  //下拉刷新
           		if(this.navIndex == 1) {
					getData('/hotandnewest/getHotAndNewestListApi', {
						pn: 1,
						orderType: 2
					}).then(d => {
						mui('#pullrefresh2').pullRefresh().endPulldownToRefresh();
						if(d.code == 1) {
							d.pageInfo.list.map(x => {
								if(x.hanType == 1) {
									x.n_isLike = x.ct_islike
									x.n_isFollow = x.ct_isfollow
									x.n_isCollect = x.ct_iscollect
									x.n_commentCount = x.ct_commentCount
									x.n_collectCount = x.ct_collectCount
									x.user_id = x.userId
									x.img_path = x.topicPicture
									x.typeName = '参与话题'
								} else if (x.hanType == 2) {
									x.typeName = '分享生活'
								} else if (x.hanType == 3) {
									x.typeName = '长帖子'
								}
								let date = new Date(x.time)
								x.h = date.getHours()
								x.m = date.getMinutes()
								x.s = date.getSeconds()
							})
							this.data1 = d.pageInfo.list
							this.lastPage = d.pageInfo.lastPage
						}
					})
				} else if(this.navIndex == 0) {
					getData('/topic/appFindAppTopic', {
						pn: 1
					}).then((d) => {
						this.$store.state.isLoading = false
						if(d.code == 1) {
							mui('#pullrefresh2').pullRefresh().endPulldownToRefresh();
							this.data = d.pageInfo.list
							this.lastPage = d.pageInfo.lastPage
						}
					})
				} else if(this.navIndex == 2) {
					getData('/hotandnewest/getHotAndNewestListApi', {
						pn: 1,
						orderType: 1
					}).then(d => {
						mui('#pullrefresh2').pullRefresh().endPulldownToRefresh();
						if(d.code == 1) {
							d.pageInfo.list.map(x => {
								if(x.hanType == 1) {
									x.n_isLike = x.ct_islike
									x.n_isFollow = x.ct_isfollow
									x.n_isCollect = x.ct_iscollect
									x.n_commentCount = x.ct_commentCount
									x.n_collectCount = x.ct_collectCount
									x.user_id = x.userId
									x.img_path = x.topicPicture
									x.typeName = '参与话题'
								} else if (x.hanType == 2) {
									x.typeName = '分享生活'
								} else if (x.hanType == 3) {
									x.typeName = '长帖子'
								}
								let date = new Date(x.time)
								x.h = date.getHours()
								x.m = date.getMinutes()
								x.s = date.getSeconds()
							})
							this.data2 = d.pageInfo.list
							this.lastPage = d.pageInfo.lastPage
						}
					}).catch(err => {
						console.log(err)
					})
				}
           	}
		},
		mounted() {
			this.init()
			this.$nextTick(() => {
				mui.init({
	                pullRefresh: {
	                    container: '#pullrefresh2',
	                    up: {//上拉加载
	                    	height: 40,
	                        auto:false,//可选,默认false.自动上拉加载一次
	                        contentrefresh: '正在加载...',
	                        contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
	                        callback: this.pullupRefresh
	                    },
						down: {                        
							contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容                        
							contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容                        
							contentrefresh: "正在刷新…", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容                        
							auto: false,//可选,默认false.首次加载自动下拉刷新一次                        
							callback: this.pulldownRefresh                   
						}
	                }
	            });
			})
		},
		created() {
			//处理mui下拉加载的bug
			for(var i = mui.hooks.inits.length-1,item;i>=0;i--){
				item=mui.hooks.inits[i];
				if(item.name=="pullrefresh"){
				    item.repeat=true;
				}
			}
		},
		watch: {
			navIndex(val) {
				mui('#pullrefresh2').scroll().scrollTo(0,0);
				this.page = 1
				this.$store.state.isLoading = true
				if(val == 1) {
					getData('/expertrecommend/getExpertRecommendApi', {
						pn: 1
					}).then(d => {
						if(d.code == 1) {
							this.userList = d.pageInfo.list
						}
					})
					
					getData('/hotandnewest/getHotAndNewestListApi', {
						pn: 1,
						orderType: 2
					}).then(d => {
						this.$store.state.isLoading = false
						if(d.code == 1) {
							d.pageInfo.list.map(x => {
								if(x.hanType == 1) {
									x.n_isLike = x.ct_islike
									x.n_isFollow = x.ct_isfollow
									x.n_isCollect = x.ct_iscollect
									x.n_commentCount = x.ct_commentCount
									x.n_collectCount = x.ct_collectCount
									x.user_id = x.userId
									x.img_path = x.topicPicture
									x.typeName = '参与话题'
								} else if (x.hanType == 2) {
									x.typeName = '分享生活'
								} else if (x.hanType == 3) {
									x.typeName = '长帖子'
								}
								let date = new Date(x.time)
								x.h = date.getHours()
								x.m = date.getMinutes()
								x.s = date.getSeconds()
							})
							this.data1 = d.pageInfo.list
							this.lastPage = d.pageInfo.lastPage
						}
					}).catch(err => {
						this.$store.state.isLoading = false
						console.log(err)
					})
					
				} else if(val == 0) {
					getData('/topic/appFindAppTopic', {
						pn: 1
					}).then((d) => {
						this.$store.state.isLoading = false
						if(d.code == 1) {
							this.data = d.pageInfo.list
							this.lastPage = d.pageInfo.lastPage
//							this.lastPage = d.note.lastPage
						}
					})
				} else if(val == 2) {
					getData('/hotandnewest/getHotAndNewestListApi', {
						pn: 1,
						orderType: 1
					}).then(d => {
						this.$store.state.isLoading = false
						if(d.code == 1) {
							d.pageInfo.list.map(x => {
								if(x.hanType == 1) {
									x.n_isLike = x.ct_islike
									x.n_isFollow = x.ct_isfollow
									x.n_isCollect = x.ct_iscollect
									x.n_commentCount = x.ct_commentCount
									x.n_collectCount = x.ct_collectCount
									x.user_id = x.userId
									x.img_path = x.topicPicture
									x.typeName = '参与话题'
								} else if (x.hanType == 2) {
									x.typeName = '分享生活'
								} else if (x.hanType == 3) {
									x.typeName = '长帖子'
								}
								let date = new Date(x.time)
								x.h = date.getHours()
								x.m = date.getMinutes()
								x.s = date.getSeconds()
							})
							this.data2 = d.pageInfo.list
							this.lastPage = d.pageInfo.lastPage
						}
					}).catch(err => {
						this.$store.state.isLoading = false
						console.log(err)
					})
				}
			}
		}
	}
</script>

<style scoped lang="less">
	#pullrefresh2 {
		margin-top: 80px;
	}

	.content-nav-list {
		position: fixed;
		background: #eee;
		width: 100%;
		top: 50px;
		display: flex;
		.content-nav-list-item {
			flex: 1;
			text-align: center;
			padding: 5px 0;
		}
		.active {
			font-size: 15px;
			font-weight: bold;
		}
	}
	
	.topic-list {
		.topic-list-item {
			position: relative;
			margin-bottom: 10px;
			.num {
				position: absolute;
				top: 10px;
				right: 20px;
				display: flex;
				align-items: center;
				z-index: 1;
				div {
					color: #fff;
					margin-left: 5px;
				}
			}
		}
	}
	
	.content-list {
		
		.content-list-follow {
			background: #fff;
			border-bottom: 1px solid #eee;
			.content-list-follow-header {
				display: flex;
				justify-content: space-between;
				padding: 10px;
				div:nth-child(2) {
					color: #7B7B7B;
					display: -webkit-box;
					align-items: center;
					justify-content: center;
					img {
						width: 5px;
						height: 10px;
						margin-left: 5px;
					}
				}
			}
			.content-list-follow-list {
				padding: 0 10px 10px;
				display: flex;
				.item {
					width: 33.3%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					/*text-align: center;*/
					
					div {
						display: flex;
						justify-content: center;
					}
					
					.itemImg {
						width: 80px;
						height: 80px;
						border-radius: 50%;
					}
					.btn {
						padding: 2px 15px;
						display: flex;
						align-items: center;
						border-radius: 99px;
						background: #c9eb59;
						img {
							width: 8px;
							height: 8px;
							margin-right: 5px;
						}
					}
					.active {
						background: #ccc;
						color: #7B7B7B;
					}
				}
			}
		}
		.content-list-item {
			margin-bottom: 10px;
			padding: 15px 15px 0;
			background: #fff;
			.content-list-item-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 5px;
				div {
					display: flex;
					img {
						width: 50px;
						height: 50px;
						margin-right: 10px;
						border-radius: 50%;
					}
					.item-user {
						flex-direction: column;
						display: flex;
						justify-content: center;
						.item-user-title {
							font-size: 15px;
							text-align: left;
						}
						.item-user-date {
							color: #7B7B7B;
							width: 100%;
						}
					}
					.btn {
						display: table;
						align-items: center;
						padding: 3px 15px;
						border-radius: 5px;
						background: #c9eb59;
						color: #fff;
					}
					.active {
						background: #ccc;
						color: #7B7B7B;
					}
				}
			}
			.content-list-item-content {
				border-bottom: 1px solid #e5e5e5;
				.item-content-title {
					font-size: 15px;
					font-weight: bold;
				}
				.item-content-imgs {
					display: -webkit-box;
					img {
						width: 22.5%;
						/*flex: 1;*/
						margin-right: 5px;
						&:last-child {
							margin: 0;
						}
					}
				}
				.item-content-bottom {
					color: #7B7B7B;
					margin: 5px 0;
				}
			}
			.item-bottom {
				display: flex;
				.item-bottom-item {
					flex: 1;
					align-items: center;
					display: flex;
					padding: 10px 10px;
					div {
						display: flex;
						margin: 0 auto;
						.margin-left {
							margin-left: 10px;
						}
					}
					img {
						width: 20px;
						height: 18px;
					}
				}
			}
		}
	}
</style>